<template>
	<view class="mbti-pop" :style="{pointerEvents:isOpen?'fill':'none'}">
		<view class="pop-content">
			<mPop ref="mPop" :popHeigh="1074" maskBgColor="rgba(0,0,0,0.5)" :isBackDrop="true" @close="handleMpopClose">
				<view class="mbti-pop-content flex-column-start-start">
					<view class="pop-top flex-row-between-center">
						<view class="pop-cancel pop-control flex-row-center-center" @click="handleCancelBtnClick">
							<image class="cover-img"
								src="https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/fb8bc0acf96d47c69984c06152422d26.png"
								mode="aspectFill"></image>
						</view>
						<view class="pop-title flex-row-center-center">{{title}}</view>
						<view class="pop-confirm pop-control flex-row-center-center" @click="handleConfirmIonClick">
							<image class="cover-img postion-center-center" v-show="isCanConfirm"
								src="https://cdn.osisx.com/runse/images/confirm-icon.png" mode="aspectFill"></image>
							<image class="cover-img postion-center-center" v-show="!isCanConfirm"
								src="https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/7faf7d342cd64971a91047b7f98647c3.png"
								mode="aspectFill"></image>
						</view>
					</view>
					<view class="input-content">
						<view class="input-item flex-column-start-center" :class="{'no-margin-bottom':!item.type}"
							v-for="(item,index) in controlDatas" :key="index">
							<view class="item-sub-label" v-if="item.subLabel">
								{{item.subLabel}}
							</view>
							<view class="item-input-after flex-row-start-center" v-if="item.type=='label-after'">
								<view class="item-input">
									<input v-model="item.value" class="item-input-value"
										:class="{'align-right':inputAlignRight}" style="width: 100%;" type="password"
										v-if="item.valueType==='password'" @confirm="handleConfirmIonClick" />
									<input v-model="item.value" class="item-input-value"
										:class="{'align-right':inputAlignRight}" style="width: 100%;" type="text"
										v-if="item.valueType==='text'" :maxlength="item.limit"
										@confirm="handleConfirmIonClick" />
								</view>
								<view class="item-label item-label-after">{{item.label}}</view>
							</view>
							<view class="item-input-after flex-row-start-center" v-if="item.type=='label-none'">
								<view class="item-input" :class="{'bg-none':item.valueType=='sex'}">
									<input v-model="item.value" class="item-input-value"
										:class="{'align-right':inputAlignRight}" style="width: 100%;" type="password"
										v-if="item.valueType==='password'" @confirm="handleConfirmIonClick" />

									<input v-model="item.value" class="item-input-value"
										:class="{'align-right':inputAlignRight}" style="width: 100%;" type="text"
										v-if="item.valueType==='text'" :maxlength="item.limit"
										@confirm="handleConfirmIonClick" />

									<!-- 性别选择 -->
									<view class="sex-tab flex-row-start-center" v-if="item.valueType=='sex'">
										<view class="sex-tab-item flex-row-between-center" style="margin-right: 34rpx;"
											v-for="(sitem,sindex) in sexTabList" :key="sindex"
											:class="{'act-sex-tab-item':item.value==sitem.value}"
											@click="handleSexClick(item,sitem)">
											<view class="sex-info flex-row-start-center">
												<image class="sex-info-icon" :src="sitem.icon" mode="aspectFill">
												</image>
												<text style="margin-left: 16rpx;">{{sitem.label}}</text>
											</view>
											<view class="sex-control"
												:class="{'sex-control-choosed':item.value==sitem.value}"></view>

										</view>
									</view>
								</view>
							</view>
							<view class="item-input-after flex-row-start-center" v-if="item.type=='label-in'">
								<view class="item-input flex-row-start-center">
									<text style="margin-left: 28rpx;" class="item-label-in">{{item.label}}</text>
									<input v-model="item.value" class="item-input-value"
										:class="{'align-right':inputAlignRight}" style="flex:1" type="password"
										v-if="item.valueType=='password'" @confirm="handleConfirmIonClick"
										:placeholder="item.placeholder"
										placeholder-style="ont-weight: 400;font-size: 32rpx;color: #CDCDCD;line-height: 44rpx;" />
									<input v-model="item.value" class="item-input-value"
										:class="{'align-right':inputAlignRight}" style="flex:1" type="text"
										v-if="item.valueType=='text'" :maxlength="item.limit"
										@confirm="handleConfirmIonClick" :placeholder="item.placeholder"
										placeholder-style="font-weight: 400;font-size: 32rpx;color: #CDCDCD;line-height: 44rpx;" />
									<input v-model="item.value" class="item-input-value"
										:class="{'align-right':inputAlignRight}" style="flex:1" type="nickname"
										v-if="item.valueType=='nick-name'" :maxlength="item.limit"
										@confirm="handleConfirmIonClick" :placeholder="item.placeholder"
										placeholder-style="font-weight: 400;font-size: 32rpx;color: #CDCDCD;line-height: 44rpx;" />

									<!-- 头像 -->
									<view class="avatar-box flex-row-end-center" v-if="item.valueType=='avatar'">
										<view class="avatar-content">
											<image class="cover-img" style="border-radius: 50%;"
												src="https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/ec1b1ff192e54dc79a39bc0ff1e3563c.png"
												mode="aspectFill" v-if="!item.value"></image>
											<image class="cover-img" style="border-radius: 50%;" :src="item.value"
												mode="aspectFill" v-else></image>
										</view>
										<button class="login-avatar-btn" style="margin: 0rpx" open-type="chooseAvatar"
											@chooseavatar="onChooseAvatar(item,$event)">
										</button>
									</view>
									<!-- 选择性别 -->
									<view class="sex-box flex-row-end-center" v-if="item.valueType=='sex'">
										<view class="sex-item flex-row-end-center" v-for="(sitem,sindex) in sexList"
											:key="sindex" @click="handleSexClick(item,sitem)">
											<view class="sex-icon">
												<image class="cover-img" :src="sitem.icon" mode="aspectFill"></image>
											</view>
											<view class="sex-label"
												:class="{'sex-label-choosed':item.value===sitem.value}">
												{{sitem.label}}
											</view>
											<view class="sex-control"
												:class="{'sex-control-choosed':item.value===sitem.value}"></view>
										</view>
									</view>

									<!-- 选择手机号 -->
									<view class="phone-box flex-row-end-center" v-if="item.valueType=='phone'">
										<view class="placeholder" v-if="!item.value">{{item.placeholder}}</view>
										<view v-if="item.value">{{item.value|maskPhone}}</view>
										<button open-type="getPhoneNumber" class="phone-btn" style="margin: 0rpx"
											@getphonenumber="getPhoneNumber(item,$event)"></button>
									</view>

									<!-- 生日 -->
									<view class="date-box flex-row-end-center" v-if="item.valueType=='date'"
										@click="handleDateControlClick">
										<view class="placeholder" v-if="!item.value">{{item.placeholder}}</view>
										<view v-if="item.value">{{item.value}}</view>
										<picker mode="date" :value="item.value" :end="endDate"
											@change="handleDateChange(item,$event)">
											<view class="picker-box">
											</view>
										</picker>
									</view>

								</view>
							</view>

							<view class="input-line" v-if="item.type=='line'">

							</view>

						</view>


						<slot>
						</slot>

					</view>
				</view>
			</mPop>
		</view>
	</view>
</template>

<script>
	import {
		wechatMobile
	} from "@/api/mbti"
	import mPop from "@/components/m-pop/index.vue"
	import api from "@/config/api.js";
	import {
		isPureChinese
	} from "@/utils/tools.js"

	export default {
		props: {
			inputAlignRight: {
				type: Boolean,
				default: false
			},
			dateConfirmClose: {
				type: Boolean,
				default: false
			}
		},
		components: {
			mPop
		},
		filters: {
			maskPhone(phone) {
				return String(phone).replace(/^(\d{3})\d{4}(\d{4})$/, '$1****$2');
			}
		},
		data() {
			return {
				// type label-in内部 label-none没有 label-after后边     
				controlDatas: [

					// {
					// 	type: "line"
					// }

				],
				sexTabList: [{
						label: "男生",
						icon: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/2b43d0df19bb46978d14461dc9254bde.png",
						value: "0"
					},
					{
						label: "女生",
						icon: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/2f5cb5a5c1bf4cdc9a7fdf2173793dda.png",
						value: "1"
					},
				],
				sexList: [{
						label: "男生",
						icon: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/2b43d0df19bb46978d14461dc9254bde.png",
						value: "男"
					},
					{
						label: "女生",
						icon: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/2f5cb5a5c1bf4cdc9a7fdf2173793dda.png",
						value: "女"
					},
				],
				endDate: "",
				showCalendar: false,
				title: ``,
				isOpen: false,
				testValue: "",
				code: "",
				isCancel: false,
				controlConfirm: false,
				needCallBack: false

			}
		},
		watch: {

		},
		computed: {
			isCanConfirm() {
				let flag = true
				this.controlDatas.forEach((item, index) => {
					if (item.isRequire && (!item.value && item.value !== 0)) {
						flag = false
					}
				})
				return (flag && this.isOpen && this.controlDatas.length) || this.controlConfirm
			}
		},
		created() {
			this.getNowDate()
		},
		methods: {
			getNowDate() {
				const date = new Date();
				const year = date.getFullYear();
				const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始，需+1并补零
				const day = String(date.getDate()).padStart(2, '0'); // 日期补零
				this.endDate = `${year}-${month}-${day}`
			},
			handleDateControlClick() {
				this.showCalendar = true
			},
			handleDateChange(item, e) {
				item.value = e.detail.value
				if (item.valueType == 'date' && this.dateConfirmClose) {
					this.handleConfirmIonClick()
				}
			},
			getPhoneNumber(item, e) {
				let code = e.detail.code
				wechatMobile({
					code
				}).then(res => {
					item.value = res.data.data
				}).catch(err => {
					uni.showToast({
						title: "获取失败",
						icon: 'none'
					})
				})
			},
			onChooseAvatar(item, e) {
				let {
					avatarUrl
				} = e.detail
				let baseUrl = "https://mbti.osisx.com/xiaozhi"
				uni.uploadFile({
					url: baseUrl + "/file/upload",
					filePath: avatarUrl,
					name: 'file',
					success(res) {
						const data = res.data
						const resData = JSON.parse(data)
						let url = baseUrl + resData.data
						item.value = url
					},
					fail() {
						uni.showToast({
							title: "上传失败",
							icon: "none"
						})
					}
				})
			},
			handleSexClick(item, sitem) {
				item.value = sitem.value
			},
			handleConfirmIonClick() {
				if (this.isCanConfirm) {
					let obj = this.controlDatas.find((item, index) => {
						return item.code == "alias"
					})
					if (obj) {
						if (!isPureChinese(obj.value)) {
							uni.showToast({
								title: "仅支持纯中文",
								icon: "none"
							})
							return
						}
					}



					if (this.needCallBack) {
						this.$emit('callBack', (e) => {
							console.log("传递回来的是", e);
							if (e) {
								this.close()
							}
						})
					} else {
						this.close()
					}
				}




			},
			handleControlConfirm(e) {
				this.controlConfirm = e
			},
			handleCancelBtnClick() {
				this.isOpen = false
				this.controlDatas = []
				this.controlConfirm = false
				this.close()
				this.$emit('cancel')
			},
			close() {
				if (this.$refs.mPop) {
					this.$refs.mPop.close()
				}
			},
			open(e) {
				this.isOpen = true
				let {
					data,
					code,
					title,
					needCallBack
				} = e
				this.controlDatas = data ? data : []
				this.code = code
				this.title = title
				this.needCallBack = needCallBack
				this.$refs.mPop.open()
			},
			// 原始pop组件关闭
			handleMpopClose(e) {
				console.log("调用了", e);
				if (e == 'virtual') {
					if (this.isCanConfirm) {
						this.$emit("confirmValue", {
							data: this.controlDatas,
							code: this.code,
							title: this.title
						})
						this.controlConfirm = false
					}
				} else {
					this.controlDatas = []
					this.controlConfirm = false
					this.$emit('cancel')
				}
				this.isOpen = false
			}
		}
	}
</script>

<style lang="scss" scoped>
	.mbti-pop {
		position: absolute;
		left: 0rpx;
		bottom: 0rpx;
		width: 100%;
		height: 100%;
		z-index: 999999999;

		.calendar {
			position: absolute;
			left: 0rpx;
			top: 0rpx;
			width: 100%;
			height: 100%;
			z-index: 9;
		}

		.pop-content {
			position: absolute;
			left: 0rpx;
			top: 0rpx;
			width: 100%;
			height: 100%;
			z-index: 1;
		}

		.mbti-pop-content {
			box-sizing: border-box;
			width: 100%;
			height: 100%;
			padding: 48rpx;
			background-color: #ededed;
			border-radius: 40rpx 40rpx 0rpx 0rpx;

			.pop-top {
				width: 100%;
				height: 48rpx;
				margin-bottom: 60rpx;

				.pop-title {
					flex: 1;
					height: 100%;
					font-weight: 300;
					font-size: 32rpx;
					color: #494949;
					line-height: 44rpx;
				}

				.pop-control {
					position: relative;
					width: 48rpx;
					height: 48rpx;
				}

			}


			.input-content {
				position: relative;
				width: 100%;
				flex: 1;
				// overflow: hidden;

				.input-item {
					width: 100%;
					// height:112rpx;
					margin-bottom: 48rpx;

					.item-sub-label {
						width: 100%;
						height: 40rpx;
						font-weight: 400;
						font-size: 28rpx;
						color: #979797;
						line-height: 40rpx;
						margin-bottom: 24rpx;
					}

					.item-input-after {
						width: 100%;
					}

					.input-line {
						width: 100%;
						height: 0.5rpx;
						background-color: #CDCDCD;

					}

					.item-input {
						flex: 1;
						height: 112rpx;
						background-color: #ffff;
						border-radius: 12rpx;
						// margin-right: 24rpx;

						font-weight: 500;
						font-size: 32rpx;
						color: #494949;
						line-height: 44rpx;

						.item-input-value {
							box-sizing: border-box;
							height: 100%;
							padding: 0rpx 28rpx;

						}

						.align-right {
							text-align: right;
						}

						.sex-tab {
							flex: 1;
							height: 100%;

							.sex-tab-item {
								flex: 1;
								height: 100%;
								background-color: #ffff;
								border-radius: 12rpx;
								border: 2rpx solid transparent;
								padding-left: 28rpx;
								padding-right: 36rpx;

								.sex-info {
									font-weight: 500;
									font-size: 32rpx;
									color: #494949;
									line-height: 44rpx;

									.sex-info-icon {
										width: 48rpx;
										height: 48rpx;
									}
								}
							}

							.sex-control {}

							.act-sex-tab-item {
								border-color: #6DD400;
							}
						}

						.avatar-box {
							position: relative;
							height: 100%;
							flex: 1;
							margin-right: 28rpx;

							.avatar-content {
								position: relative;
								width: 64rpx;
								height: 64rpx;
								border-radius: 50%;


							}

							.login-avatar-btn {
								position: absolute;
								left: 0rpx;
								top: 0rpx;
								width: 100%;
								height: 100%;
								z-index: 999;
								opacity: 0;

							}

						}

						.sex-box {
							flex: 1;
							margin-right: 28rpx;
							height: 100%;

							.sex-item {
								margin-right: 16rpx;

								&:first-child {
									margin-right: 90rpx;
								}

								.sex-icon {
									width: 48rpx;
									height: 48rpx;
									margin-right: 16rpx;
								}

								.sex-label {
									font-weight: 400;
									font-size: 32rpx;
									color: #CDCDCD;
									line-height: 44rpx;
									margin-right: 16rpx;
								}

								.sex-label-choosed {
									font-weight: 500;
									font-size: 32rpx;
									color: #494949;
									line-height: 44rpx;
								}



							}
						}

						.phone-box {
							position: relative;
							flex: 1;
							height: 100%;
							margin-right: 28rpx;






							.phone-btn {
								position: absolute;
								left: 0rpx;
								top: 0rpx;
								width: 100%;
								height: 100%;
								z-index: 999;
								opacity: 0;

							}
						}

						.placeholder {
							font-weight: 400;
							font-size: 32rpx;
							color: #CDCDCD;
							line-height: 44rpx;
						}

						.date-box {
							position: relative;
							flex: 1;
							height: 100%;
							margin-right: 28rpx;

							.picker-box {
								position: absolute;
								left: 0rpx;
								top: 0rpx;
								width: 100%;
								height: 100%;
								z-index: 999;
							}
						}
					}

					.bg-none {
						background-color: transparent;
					}

					.item-label-after {
						font-weight: 300;
						font-size: 40rpx;
						color: #979797;
						line-height: 56rpx;
						margin-left: 24rpx;
					}

					.item-label-in {
						font-weight: 400;
						font-size: 32rpx;
						color: #494949;
						line-height: 44rpx;
					}




				}

				.no-margin-bottom {
					margin-bottom: 0rpx;
				}

			}

		}



	}

	.sex-control {
		width: 32rpx;
		height: 32rpx;
		border: 2rpx solid #CECECE;
		border-radius: 50%;
	}

	.sex-control-choosed {
		background: #6DD400;
		border: 2rpx solid #B0FF5C;
		animation: sexScaleAni 0.2s ease-in-out;

		@keyframes sexScaleAni {
			0% {
				transform: scale(1);
			}

			50% {
				transform: scale(1.1);
			}

			100% {
				transform: scale(1);
			}
		}
	}
</style>